<template>
  <div style="width: 500px">
    <el-form :model="kai" :rules="rule">
      <el-form-item prop="realName" label="请输入您的姓名">
        <el-input v-model="kai.realName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item prop="bankCard" label="请输入您的身份证号：">
        <el-input v-model="kai.bankCard" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="请输入注册的手机号：">
        <el-input
          v-model="kai.mobile"
          placeholder="手机号"
          @blur="findNames"
        ></el-input>
      </el-form-item>
      <el-button type="primary" @click="kaihus">开户</el-button>
      <el-button type="success" @click="zz">去转账</el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { findName, kaihu } from '@/api/open'
import router from '@/router'
const kai = reactive({})
// const name=reactive({})

const rule = {
  realName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  bankCard: [
    { required: true, message: '身份证号不能为空', trigger: 'blur' },
    { pattern: /^\d{18}$/, message: '身份证号格式不正确', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
}
function kaihus() {
  console.log(kai)
  kaihu(kai).then(res => {
    console.log(res)
    if (res.data) {
      ElMessage.success('开户成功')
      router.push('/pay')
    } else {
      ElMessage.error('开户失败')
    }
  })
}
function zz() {
  router.push('/Money')
}
function findNames() {
  console.log('kai：' + kai.mobile)
  findName(kai).then(res => {
    console.log(res)
    if (res.code === 200) {
      ElMessage.success('手机号存在')
    } else {
      ElMessage.error('手机号不匹配')
    }
  })
}
</script>

<style scoped></style>
